<script setup>
import { getMachineOEESubV2, getMachineOEEworkdescV2 } from '@/api/machine'
import { fontSize } from '@/utils/globalMethod.js'

import moment from 'moment'

const option = ref({})
const loadData = async () => {
  const { data } = await getMachineOEESubV2({
    date: [moment().format('YYYYMMDD'), moment().format('YYYYMMDD')]
  })
  const { data: _data } = await getMachineOEEworkdescV2({
    date: [moment().format('YYYYMMDD'), moment().format('YYYYMMDD')]
  })
  const x = []
  const y = []
  const _y = []
  data.map(item => {
    x.push(moment(item.kgrq).format(`M月D日`))
    y.push(Number(item.tzsc).toFixed(2))
    _y.push(Number(item.gzsc).toFixed(2))
  })

  /* 1、获取设备的运作时间之和 */
  const navHour = _y.reduce((acc, pre) => {
    acc += +pre
    return acc
  }, 0)

  // 累计停止时间
  const _navHour = y.reduce((acc, pre) => {
    acc += +pre
    return acc
  }, 0)

  /* 2、指定时间内设备运作的理论小时数  公式：设备数量 * 24 * 天数 */
  const subHour = navHour + _navHour

  /* 可动率：所有机台的小时总数  / 所有机台的运行总数 */

  /* 良品率：良品数量  /  产品总数   */

  // 累计良品数量
  const goodqty = _data.reduce((acc, pre) => {
    acc += pre.goodqty
    return acc
  }, 0)

  // 累计加工总数
  const sum = _data.reduce((acc, pre) => {
    acc += pre.badqty + pre.goodqty
    return acc
  }, 0)

  // 实际工时
  const RealTime = _data.reduce((acc, pre) => {
    acc += pre.RealTime
    return acc
  }, 0)

  // 标准工时
  const StdTime = _data.reduce((acc, pre) => {
    acc += pre.StdTime
    return acc
  }, 0)

  // 净开动率
  const jingkaidonglv = sum / navHour

  // 速度开工率
  const sudukaidonglv = StdTime / RealTime

  // 开动率运行效率
  let yunxingxiaolv = 0
  if (Number(jingkaidonglv) * Number(sudukaidonglv) > 100) {
    yunxingxiaolv = 100
  } else {
    yunxingxiaolv = (Number(jingkaidonglv) * Number(sudukaidonglv)).toFixed(2)
  }
  console.log((Number(jingkaidonglv), Number(sudukaidonglv)))

  // OEE
  let oeexl = 0
  if ((Number(navHour) / Number(subHour)) * Number(yunxingxiaolv) * (Number(goodqty) / Number(sum)) > 100) {
    oeexl = 100
  } else {
    oeexl = (Number(navHour) / Number(subHour)) * Number(yunxingxiaolv) * (Number(goodqty) / Number(sum))
  }
  //可动率
  let kdlxl = 0
  if ((Number(navHour) / Number(subHour)) * 100 > 100) {
    kdlxl = 100
  } else {
    kdlxl = (Number(navHour) / Number(subHour)) * 100
  }
  //合格品率
  let hgpxl = 0
  if ((Number(goodqty) / Number(sum)) * 100 > 100) {
    hgpxl = 100
  } else {
    hgpxl = (Number(goodqty) / Number(sum)) * 100
  }
  var demoData = [
    {
      name: 'OEE',
      value: isNaN(oeexl) ? '100' : oeexl.toFixed(2),
      pos: ['20%', '20%'],
      range: [0, 100]
    },
    {
      name: '可动率',
      value: isNaN(kdlxl) ? '100' : kdlxl.toFixed(2),
      pos: ['70%', '20%'],
      range: [0, 100]
    },
    {
      name: '开动率',
      value: isNaN(Number(yunxingxiaolv)) ? '100' : Number(yunxingxiaolv).toFixed(2),
      pos: ['20%', '65%'],
      range: [0, 100],
      splitNum: 9
    },
    {
      name: '合格品率',
      value: isNaN(hgpxl) ? '100' : hgpxl.toFixed(2),
      pos: ['70%', '65%'],
      range: [0, 100]
    }
  ]

  var highlight = '#62b6fc'

  option.value = {
    series: (function () {
      var result = []

      demoData.forEach(function (item) {
        result.push(
          // 外围刻度
          {
            type: 'gauge',
            center: item.pos,
            radius: '33%', // 1行3个
            splitNumber: item.splitNum || 10,
            min: item.range[0],
            max: item.range[1],
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, highlight]]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: highlight,
                width: 1
              },
              length: -5,
              splitNumber: 10
            },
            splitLine: {
              show: true,
              length: -14,
              lineStyle: {
                color: highlight
              }
            },
            axisLabel: {
              show: false,
              distance: -20,
              color: highlight,
              fontSize: fontSize(0.12),
              fontWeight: 'bold'
            },
            pointer: {
              show: 0
            },
            detail: {
              show: 0
            }
          },

          // 内侧指针、数值显示
          {
            name: item.name,
            type: 'gauge',
            center: item.pos,
            radius: '30.33%',
            startAngle: 225,
            endAngle: -45,
            min: item.range[0],
            max: item.range[1],
            axisLine: {
              show: true,
              lineStyle: {
                width: 16,
                color: [[1, 'rgba(255,255,255,.1)']]
              }
            },
            axisTick: {
              show: 0
            },
            splitLine: {
              show: 0
            },
            axisLabel: {
              show: 0
            },
            pointer: {
              show: true,
              length: '105%'
            },
            detail: {
              show: true,
              offsetCenter: [0, '120%'],
              fontSize: fontSize(0.12),
              color: highlight,
              formatter: function (params) {
                return `${item.name}: ${params}% `
              },
              rich: {
                name: {
                  fontSize: fontSize(0.12),
                  lineHeight: 30,
                  color: highlight
                }
              }
            },
            itemStyle: {
              color: highlight
            },
            data: [
              {
                value: item.value
              }
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: fontSize(0.12),
              color: highlight
            }
          }
        )
      })

      return result
    })()
  }
}

onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100">
    <div class="board-title">今日OEE分析</div>
    <ps-chart2 :option="option" />
  </div>
</template>

<style scoped lang="scss"></style>
